<template>
	<view>
		<view class="" style="width: 100%;" v-if="pet_team && pet_team.teamId != '-1'">
			<cu-custom :bgColor="'var(--primaryBg)'">
				<view slot="content" :style="scrollTop>CustomBar?'color:#fff':''" class="title">
					服务
				</view>
			</cu-custom>
			<view class="box">
				<view class="head">
					<view @click="handleTab(index)" v-for="(item,index) in tabList" :key="index" class="head-item"
						:class="tabIndex==index?'active':''">
						{{item.name}}
					</view>
				</view>


				<grant v-if="tabIndex == 0" :serveName="params.serveName" @input="handleServeName" :list="list"></grant>
				<serve v-if="tabIndex == 1" v-model="params.issueStatus" :list="list"></serve>
				<rests v-if="tabIndex == 2" v-model="params.issueStatus" :list="list"></rests>
			</view>

		</view>

		<view v-else>
			<cu-custom :bgColor="'var(--primaryBg)'">
				<view slot="content" :style="scrollTop>CustomBar?'color:#fff':''" class="title">
					服务
				</view>
			</cu-custom>
			<noMerchant ref="noMerchant" :petTeam="pet_team"></noMerchant>


		</view>
		<loginModal ref="loginModal"></loginModal>
	</view>

</template>

<script>
	import grant from "./components/grant"
	import serve from "./components/serve"
	import rests from "./components/rests"
	import noMerchant from "@/components/noMerchant"
	import {
		pageMyService,
		pageOtherService
	} from "@/api/pet/service/saler.js"
	import {
		getEnumList
	} from "@/api/pet/index/saler.js"
	import {
		listTeamrole,
	} from '@/api/team/index'
	import util from '@/common/util'
	export default {
		components: {
			grant,
			serve,
			rests,
			noMerchant
		},
		data() {
			return {
				scrollTop: 0,
				CustomBar: this.CustomBar,
				tabIndex: 0,
				tabList: [{
					name: '已发放服务',
				}, {
					name: '我的服务',
				}, {
					name: '其他服务商',
				}],
				params: {
					page: 1,
					limit: 10,
					teamId: '',
					serveName: '',
					issueStatus: 1,
				},
				list: [],
				total: 0,
				item: {},
				pet_team: {},
			}
		},
		created() {

		},
		methods: {
			getPetTeam() {
				this.pet_team = uni.getStorageSync('pet_team')
				if (this.pet_team && this.pet_team.teamId != '-1') {
					this.params.teamId = this.pet_team.teamId
				}
				uni.stopPullDownRefresh()
			},
			getEnumList() {
				getEnumList().then(res => {

				})
			},
			handleTab(index) {
				this.tabIndex = index
				this.params.serveName = ''
				this.params.issueStatus = 1
				this.init({tabIndex:this.tabIndex})
			},
			regMerchant() {
				//if (!util.isLogin()) return;
				listTeamrole({
					svrType: 'CARGO',
					status: 'PASS'
				}).then(e => {
					let item = e?.find(item => item.teamType == 'E')
					if (item) {
						uni.setStorageSync('pet_team', {
							teamId: item.teamId,
							teamName: item.teamName,
							applyStatus: item.applyStatus
						})
					} else {
						let userItem = e[0]
						uni.setStorageSync('pet_team', {
							teamId: '-1',
							teamName: '个人',
							applyStatus: userItem.applyStatus, //是否有申请过服务商
							cargoTeamId: userItem.cargoTeamId, // 再次申请服务商要上传的id
							cargoTeamStatus: userItem.cargoTeamStatus, //后台审核状态
						})
					}
					this.init({tabIndex:this.tabIndex})
				})
			},
			init(e) {
				this.tabIndex = (e && e.tabIndex) || 0
				this.getPetTeam()

				this.params.page = 1
				this.list = []
				this.getList()
			},
			onScroll(e) {
				this.scrollTop = e.scrollTop
			},
			reachBottom() {
				if (this.list.length < this.total) {
					this.params.page++
					this.getList()
				}
			},
			handleServeName(e) {
				this.params.serveName = e
				this.init({tabIndex:this.tabIndex})
			},
			getList() {
				if (!this.pet_team || this.pet_team.teamId == '-1') {
					return
				}
				uni.showLoading({
					title: '加载中',
					task: true
				})
				let api = null
				let params = {}
				if (!this.tabIndex) {
					api = pageOtherService
					params = {
						page: this.params.page,
						limit: this.params.limit,
						teamId: this.params.teamId,
						type: 'USER',
						keyWord: this.params.serveName,
					}
				}
				if (this.tabIndex == 1) {
					api = pageMyService
					params = {
						page: this.params.page,
						limit: this.params.limit,
						teamId: this.params.teamId,
						issueStatus: this.params.issueStatus,
					}
				}
				if (this.tabIndex == 2) {
					api = pageOtherService
					params = {
						page: this.params.page,
						limit: this.params.limit,
						type: 'MCH',
						bizId: this.params.teamId,
						issueStatus: this.params.issueStatus,
					}
				}
				api(params).then(res => {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					uni.hideLoading()
					uni.stopPullDownRefresh();
				})
			},
		},
	}
</script>
<style>
</style>
<style scoped lang="scss">
	.cont-box {
		width: 100%;
		background: #fff;
		position: absolute;
		top: 18rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 168rpx;

		// justify-content: center;
		image {
			margin-bottom: 24rpx;
			width: 240rpx;
			height: 240rpx;
		}

		view {
			margin-bottom: 8rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: var(--h1Color);
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
		}

		.btn {
			margin-top: 64rpx;
			width: 320rpx;
			height: 96rpx;
			background: var(--primaryBg);
			border-radius: 53rpx;

			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: var(--btnColor);
			line-height: 42rpx;
			text-align: center;
			font-style: normal;

			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.box {
		width: 100%;
		display: flex;
		flex-direction: column;

		.head {
			width: 100%;
			padding: 12rpx 0 58rpx;
			display: flex;
			background: var(--primaryBg);

			.head-item {
				width: 33.33%;
				position: relative;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color:var(--h1Color);
				line-height: 40rpx;
			}

			.active {
				font-weight: 600;
				color: var(--h1Color);

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -8rpx;
					transform: translateX(-50%);
					width: 32rpx;
					height: 4rpx;
					background:var(--h1Color);
					border-radius: 3rpx;
				}
			}
		}



	}
</style>